/*
 * @Author: lixinke 530822237@qq.com
 * @Date: 2022-08-14 22:46:22
 * @LastEditors: lixinke 530822237@qq.com
 * @LastEditTime: 2022-08-17 13:45:34
 * @FilePath: \cm_pro\crm_customer\src\components\Ordermanage\Heard\Heard.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React,{useState} from 'react'
import './Heard.css'
import { DownOutlined } from '@ant-design/icons';
import Orderlist from '../Form/Orderlist';
import Newaddday from '../Form/Newaddday'
import Newaddweek from '../Form/Newaddweek';
import Newaddmonth from '../Form/Newaddmonth';
import { Modal } from "antd";
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import {ConfigProvider} from 'antd';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link,
  } from "react-router-dom";
// import { Link} from 'react-router-dom'
import Addmodal from '../Modal/Addmodal';
import Heighsearch from '../HeighSearch/HeighSearch';

export default function Header() {
    const [classIndex,setClassIndex] = useState(0)
    const [isModalVisible, setIsModalVisible] = useState(false);
    function changeClass(e){
        setClassIndex(e.currentTarget.getAttribute("data-index"));
    }
    function search(){
        alert("撞单查询");
    }
    
    const showModal = () => {
        setIsModalVisible(true);
      };
    function handleOk(){
        setIsModalVisible(false);
    }
    function handleCancel(){
        setIsModalVisible(false);
    }
    const [classshow, setclassshow] = useState(true);
    const [arrowchange, setArrowchange] = useState(false);
    function show() {
    console.log(classshow);
    setclassshow(!classshow);
    setArrowchange(!arrowchange);
  }
    return (
        <Router>
            <div id='header'>
            <div className='leftTitle'>
            {/* <a to="/newcus"><span>今日新增</span><span>4</span></a> */}
                {/* eslint-disable-next-line */}
                <div className={"0"==classIndex?"active":""} onClick={changeClass} data-index="0">
                    <Link to="/Orderlist">
                        <span>订单列表</span>
                        <span>?</span>
                    </Link>
                </div>
			    <div className={"1"===classIndex?"active":""} onClick={changeClass} data-index="1">
                    <Link to='/Newaddday'>
                        <span>今日新增</span>
                        <span>?</span>
                    </Link>
                </div>
			    <div className={"2"===classIndex?"active":""} onClick={changeClass} data-index="2">
                    <Link to='/Newaddweek'>
                        <span>本周新增</span>
                        <span>?</span>
                    </Link>
                </div>
			    <div className={"3"===classIndex?"active":""} onClick={changeClass} data-index="3">
                    <Link to='/Newaddmonth'>
                        <span>本月新增</span>
                        <span>?</span>
                    </Link>
                </div>
			    <div className="search" onClick={search}><span>数据导出</span></div>
			    <div className="newcus" onClick={showModal}><span>新增订单</span>
                </div>
                <ConfigProvider locale={zh_CN}>
                    <Modal title="新增订单 [第一步选择订单客户]" width="70%" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <Addmodal></Addmodal>
                    </Modal>
                </ConfigProvider>
                
            </div>
            <div className='rightSearch'>
                <div><input type="text" placeholder='客户名称、手机号码、订单编号'/></div>
                <div>搜索</div>
                <div onClick={show}>高级搜索<span><DownOutlined className={arrowchange?"arrowup":"arrowdown"}/></span></div>
            </div>
        </div>
        <div className={classshow ? "showoff" : "showon"}>
            <Heighsearch/>
        </div>
        <Routes>
            <Route path="/Orderlist" element={<Orderlist />} />
            <Route path="/Newaddday" element={<Newaddday />} />
            <Route path="/Newaddweek" element={<Newaddweek />} />
            <Route path="/Newaddmonth" element={<Newaddmonth />} />
        </Routes>
        </Router>
        
    )
}